<template>
  <div class="pageContain">
    <div class="tabContain" v-if="true">
      <div class="tabItem" :class="{ isActive: currentIdx == 0 }" @click="clickAction(0)">首页</div>
      <div class="tabItem" :class="{ isActive: currentIdx == 1 }" @click="clickAction(1)">疾病机制</div>
      <div class="tabItem" :class="{ isActive: currentIdx == 2 }" @click="clickAction(2)">疾病进程</div>
    </div>
    <div class="bodyContain">
      <div ref="chartRef" style="width: 80%; height: 80vh;border-radius: 24px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
const citemStyle = {
  color: '#E4B571',
  boxShadow: 20,
  shadowBlur: 10,
  shadowOffsetX: 0,
  shadowOffsetY: 0,
  borderWidth: 3,
  borderColor: '#ffffff',
  shadowColor: 'rgba(255,255,255,0.8)'
};
export default {
  data() {
    return {
      chartIns: null,
      currentIdx: 0,
      activeName: "first",
      operationalArray: [],
      optionTwo: {
        color: ['#ffffff'],
        backgroundColor: '#69186B',
        title: {
          text: '{big|疾病进展风险动态预测:\n支持治疗 2 年后°}\n{small|\n在图表上选择一个点，查着莎拉随年龄增长的疾病进展风险变化情况}',
          textStyle: {
            color: 'white',
            rich: {
              big: {
                fontSize: 32, // 大的部分字体大小
                lineHeight: 48
              },
              small: {
                fontSize: 24, // 小的部分字体大小
                lineHeight: 28
              }
            }
          }
        },
        grid: {
          top: '32%',
          left: '24%',
          right: '24%',
          bottom: '16%',
          containLabel: true
        },
        tooltip: {
          backgroundColor: 'rgb(255,255,255)',
          formatter: function (param) {
            // prettier-ignore
            return '<div class="tooltipView">'
              + '尽管情况有所改善，但卡洛斯在' + param.name + '岁时,<br>仍有' + param.data / 100 + '%的进展风险。'
              + '</div>';
          }
        },
        xAxis: {
          type: 'category',
          name: '年龄 (岁)',
          nameLocation: 'middle',
          nameTextStyle: {
            color: 'white',
            padding: [20, 0, 0, 0],
            lineHeight: 48,
            fontSize: 24,
          },
          axisLabel: {
            color: 'white',
            fontSize: 24,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ffffff'
            }
          },
          boundaryGap: false,
          data: ['42', '43', '44', '45', '46', '47']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ffffff'
            }
          },
          name: '进展风险 (%)',
          nameLocation: 'middle',
          splitLine: {
            show: false
          },
          axisLabel: {
            color: 'white',
            fontSize: 24,
            formatter: function (value) {
              // 获取legend显示内容
              return value / 100;
            }
          },
          nameTextStyle: {
            color: 'white',
            lineHeight: 48,
            fontSize: 24,
            verticalAlign: "bottom",
            padding: [0, 0, 20, 0],
          },
        },
        series: [
          {
            itemStyle: citemStyle,
            lineStyle: {
              color: 'white',
              width: 4,
              type: 'solid'
            },
            symbolSize: 32, // 设置点的大小为10
            data: [57, 199, 363, 1702, 2227, 3333],
            type: 'line',
            symbol: 'circle',
          }
        ]
      },
      optionThree: {
        color: ['#ffffff'],
        backgroundColor: '#69186B',
        title: {
          text: '疾病进展风险动态预测:\n支持治疗 2 年后°',
          textStyle: {
            lineHeight: 48,
            color: 'white',
            fontSize: 32,       // 字体大小
          },
        },
        xAxis: {
          type: 'category',
          data: ['42', '43', '44', '45', '46', '47']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [57, 199, 363, 1702, 2227, 3333],
            type: 'line'
          }
        ]
      },
      optionOne: {
        color: ['#69186B', '#4E789B', '#E4B571'],
        title: {
          text: 'eGFR随时间变化',
          textStyle: {
            fontSize: 32,       // 字体大小
          },
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {
          top: '0',
          right: '0',
          orient: 'vertical',  // 设置为垂直排列
          data: [
            'Annual eGFR loss:-5',
            'Annual eGFR loss:-3',
            'Annual eGFR loss:-2'],
          textStyle: {
            lineHeight: 48,
            fontSize: 24,       // 字体大小
          },
          formatter: function (name) {
            // 获取legend显示内容
            return name + ' mL/min/1.73 m²/year';
          }
        },
        grid: {
          top: '6%',
          left: '8%',
          right: '8%',
          bottom: '8%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          name: '年龄 (岁)',
          nameLocation: 'middle',
          nameTextStyle: {
            padding: [20, 0, 0, 0],
            lineHeight: 64,
            fontSize: 32,
          },
          axisLabel: {
            fontSize: 24,
          },
          boundaryGap: false,
          data: ['40', '42', '44', '46', '48', '50', '52', '54', '56', '58', '60']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
          },
          name: 'eGFR (mL/min/1.73 m²)',
          nameLocation: 'middle',
          splitLine: {
            show: false
          },
          axisLabel: {
            fontSize: 24,
          },
          nameTextStyle: {
            lineHeight: 64,
            fontSize: 32,
            verticalAlign: "bottom",
            padding: [0, 0, 20, 0],
          },
        },
        series: [
          {
            type: 'line',
            lineStyle: {
              color: 'rgb(192, 192, 192)', // 线条颜色
              type: 'dashed' // 虚线类型
            },
            areaStyle: { color: 'rgb(231, 231, 231)' },
            data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
            itemStyle: {
              color: 'rgb(255, 255, 255)' // 使用具体的颜色值或者颜色代码
            },
            markLine: {
              data: [{
                name: '符合肾移植等待名单准入条件',
                yAxis: 20,
                label: {
                  formatter: '{b}',
                  fontSize: 21,
                  position: 'insideStartBottom'
                }
              }],
              label: {
                distance: [20, 20]
              }
            }
          },
          {
            type: 'line',
            areaStyle: { color: 'rgb(192, 192, 192)' },
            data: [15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15],
            itemStyle: {
              color: 'rgb(192, 192, 192)' // 使用具体的颜色值或者颜色代码
            }, markLine: {
              data: [{
                name: 'CKD 5期',
                yAxis: 15,
                label: {
                  formatter: '{b}',
                  fontSize: 21,
                  position: 'insideStartBottom'
                }
              }],
              label: {
                distance: [20, 20]
              }
            }
          },
          {
            lineStyle: {
              width: 4,
            },
            name: 'Annual eGFR loss:-5',
            type: 'line',
            data: [60, 60 - 60 / 9, 60 - 60 * 2 / 9, 60 - 60 * 3 / 9, 60 - 60 * 4 / 9, 60 - 60 * 5 / 9, 60 - 60 * 6 / 9, 60 - 60 * 7 / 9, 60 - 60 * 8 / 9, 0]
          },
          {
            lineStyle: {
              width: 4,
            },
            name: 'Annual eGFR loss:-3',
            type: 'line',
            data: [60, 60 - 60 / 7, 60 - 60 * 2 / 7, 60 - 60 * 3 / 7, 60 - 60 * 4 / 7, 60 - 60 * 5 / 7, 60 - 60 * 6 / 7, 0]
          },
          {
            lineStyle: {
              width: 4,
            },
            name: 'Annual eGFR loss:-2',
            type: 'line',
            data: [60, 60 - 60 / 4, 60 - 60 * 2 / 4, 60 - 60 * 3 / 4, 0]
          },
        ]
      }
    }
  },

  methods: {
    clickAction(index) {
      this.currentIdx = index
      // 清空图表
      this.chartIns.clear();
      if (index == 0) {
        this.chartIns.setOption(this.optionOne);
      } else {
        if (index == 1) {
          this.chartIns.setOption(this.optionTwo);
        } else {
          this.chartIns.setOption(this.optionThree);
        }
      }
    },
    initChart() {
      this.chartIns = echarts.init(this.$refs.chartRef);
      this.chartIns.setOption(this.optionOne);
    },
  },

  mounted() {
    this.initChart();
  }
}

</script>

<style>
.pageContain {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.tabContain {
  width: 100%;
  display: flex;
  height: 96px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #aeaeae;
}

.bodyContain {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.tabItem {
  width: 21%;
  color: #808080;
  font-size: 32px;
}

.isActive {
  color: #409eff;
  border-bottom: 4px solid #409eff;
}

.tooltipView {
  color: #3E5069;
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  font-size: 18px;
  line-height: 28px;
  padding-left: 6px;
  padding-right: 6px;
}
</style>
